<template>
  <div id="app">
    <router-view></router-view>
    <p class="h50"></p>
    <div class="footer">
      <tabbar>
        <tabbar-item link="/home" selected>
          <i slot="icon" class="iconfont icon-home f18"></i>
          <span slot="label" class="f14">首页</span>
        </tabbar-item>
        <tabbar-item link="/user">
          <i slot="icon" class="iconfont icon-VIPhuiyuan f18"></i>
          <span slot="label" class="f14">账户</span>
        </tabbar-item>
      </tabbar>
    </div>
    <div v-transfer-dom>
      <loading v-model="a"></loading>
    </div>

  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import { Tabbar,TabbarItem,Loading,TransferDomDirective as TransferDom } from 'vux'
  export default {
    name: 'app',
    data(){
      return{
        a:false
      }
    },
    directives: {
      TransferDom
    },
    components:{
      Tabbar,
      TabbarItem,
      Loading,
    },
    computed: {
      ...mapState({
        isLoading: state => state.vux.isLoading
      })
    },
    watch:{
      isLoading:function (n,o){
        // console.log(n,o);
        if(n){
          this.$vux.loading.show({
            delay: 1e3
          })
        }else {
          this.$vux.loading.hide()
        }
      }
    },
    methods:{},
    mounted(){}
  }
</script>

<style lang="less">
  @import '~vux/src/styles/reset.less';
  .footer{
    position: fixed;
    width: 100%;
    bottom: 0;
  }

</style>
